<template>
    <div class="box4" ref="map">
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import chinaJson from './china.json'

let map = ref()

echarts.registerMap('china', chinaJson as any)

onMounted(() => {
    let mycharts = echarts.init(map.value)
    mycharts.setOption({
        geo: {
            map: 'china',
            roam: true,
            top: 120,
            label: {
                show: true
            },
            itemStyle: {
                color: {
                    type: 'linear',
                    colorStops: [
                        {
                            offset: 0,
                            color: 'skyblue', // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: 'rgba(124, 166, 207, 0.73)', // 100% 处的颜色
                        },
                    ],
                    global: false, // 缺省为 false
                },
                opacity: 0.8
            },
            //地图高亮的效果
            emphasis: {
                itemStyle: {
                    color: 'blue',
                },
                label: {
                    fontSize: 33,
                },
            },
        },
        series: [
            {
                type: 'lines',
                data: [
                    {
                        coords: [
                            [116.405285, 39.904989], // 起点
                            [119.306239, 26.075302], // 终点
                        ],
                        // 统一的样式设置
                        lineStyle: {
                            color: 'lightgray',
                            width: 3,
                            curveness: 0.2
                        },
                    },
                    {
                        coords: [
                            [116.405285, 39.904989], // 起点[115.699125, 39.570039],
                            [114.298572, 30.584355], // 终点 [116.902055, 39.763523],
                        ],
                        // 统一的样式设置
                        lineStyle: {
                            color: 'lightgray',
                            width: 3,
                            curveness: 0.2
                        },
                    },
                    {
                        coords: [
                            [115.699125, 39.570039],
                            [110.372482, 34.544435],
                        ],
                        // 统一的样式设置
                        lineStyle: {
                            color: 'lightgray',
                            width: 3,
                            curveness: 0.2
                        },
                    },
                    {
                        coords: [
                            [101.778916, 36.623178],
                            [106.506231, 35.737514],
                        ],
                        // 统一的样式设置
                        lineStyle: {
                            color: 'lightgray',
                            width: 3,
                            curveness: 0.2
                        },
                    },
                    {
                        coords: [
                            [101.778916, 36.623178],
                            [126.642464, 45.756967],
                        ],
                        // 统一的样式设置
                        lineStyle: {
                            color: 'lightgray',
                            width: 3,
                            curveness: 0.2
                        },
                    },
                    {
                        coords: [
                            [114.173355, 22.320048],
                            [104.065735, 30.659462],
                        ],
                        // 统一的样式设置
                        lineStyle: {
                            color: 'lightgray',
                            width: 3,
                            curveness: 0.2
                        },
                    },
                    {
                        coords: [
                            [87.617733, 43.792818],
                            [91.132212, 29.660361]
                        ],
                        // 统一的样式设置
                        lineStyle: {
                            color: 'lightgray',
                            width: 2,
                            curveness: 0.2
                        },
                    },
                    {
                        coords: [
                            [103.823557, 36.058039],
                            [106.713478, 26.578343]
                        ],
                        // 统一的样式设置
                        lineStyle: {
                            color: 'lightgray',
                            width: 2,
                            curveness: 0.2
                        },
                    },
                ],
                //开启动画特效
                effect: {
                    show: true,
                    // symbol: 'arrow',
                    symbol: 'path://M681.121304 936.325172c-4.02978 6.971785-11.208273 10.824533-18.723434 10.824533-3.565199 0-7.259334-0.87902-10.616802-2.814092l-150.426011-85.941348c-6.683213-3.805676-10.79281-10.952446-10.79281-18.658965L490.562247 98.365308c0-11.864212 9.577123-21.521153 21.441335-21.521153 11.879562 0 21.537526 9.657964 21.537526 21.521153l0 728.881562 139.553383 79.801511C683.423743 912.948765 686.989965 926.060387 681.121304 936.325172L681.121304 936.325172zM522.669502 858.394265l-150.426011 85.941348c-3.357468 1.935072-7.051603 2.814092-10.616802 2.814092-7.515161 0-14.693654-3.853771-18.723434-10.824533-5.867638-10.264784-2.302439-23.376407 8.026814-29.275767l139.633201-79.801511L490.56327 98.365308c0-11.864212 9.577123-21.521153 21.441335-21.521153 11.879562 0 21.537526 9.657964 21.537526 21.521153l0 741.368968C533.54213 847.441818 529.352715 854.588589 522.669502 858.394265L522.669502 858.394265zM522.669502 428.605661l-451.278033 257.873162c-3.357468 1.935072-7.051603 2.814092-10.616802 2.814092-7.467065 0-14.693654-3.869121-18.723434-10.840906-5.867638-10.264784-2.302439-23.391756 8.026814-29.275767l451.278033-257.873162c10.281157-5.932106 23.408129-2.350534 29.29214 7.962346C536.563954 409.578306 532.949636 422.721651 522.669502 428.605661L522.669502 428.605661zM512.004605 861.208357c-11.864212 0-21.441335-9.593496-21.441335-21.473057L490.56327 98.365308c0-11.864212 9.577123-21.521153 21.441335-21.521153 11.879562 0 21.537526 9.657964 21.537526 21.521153l0 741.368968C533.54213 851.614861 523.884167 861.208357 512.004605 861.208357L512.004605 861.208357zM981.973326 678.45201c-3.948939 6.971785-11.208273 10.840906-18.723434 10.840906-3.565199 0-7.259334-0.87902-10.616802-2.814092l-310.684972-177.543625c-10.31288-5.900384-13.926174-19.027355-8.058536-29.340235 5.932106-10.31288 19.027355-13.910824 29.340235-7.962346l310.717717 177.543625C984.275765 655.060253 987.841987 668.187225 981.973326 678.45201L981.973326 678.45201z',
                    color: 'white',
                    symbolSize: 18,
                },
            }
        ]
    })
})
</script>

<style scoped lang="scss"></style>